 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name width1">代付订单</div>
      </div>
      <div class="content-con">
        <Form :model="form">
          <Row :gutter="24" type="flex" justify="end" class="code-row-bg">
            <Col span="4">
              <FormItem prop="timeData">
                <i-select v-model="form.timeData" clearable style="color: #000;" placeholder="时间段">
                  <Option value="today">当日</Option>
                  <Option value="yesterday">昨日</Option>
                  <Option value="week">本周</Option>
                  <Option value="month">本月</Option>
                </i-select>
              </FormItem>
            </Col>
            <Col span="4">
              <FormItem prop="starttime">
                <Date-picker style="width: 100%;" clearable  v-model="form.starttime" type="datetime" placeholder="开始时间"></Date-picker>
              </FormItem>
            </Col>
            <Col span="4">
              <FormItem prop="endtime">
                <Date-picker style="width: 100%;" clearable  v-model="form.endtime" type="datetime" placeholder="结束时间"></Date-picker>
              </FormItem>
            </Col>
            <Col span="4">
              <FormItem prop="keyword">
                <i-input v-model="form.keyword" clearable placeholder="商户ID或账户名"></i-input>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="24" type="flex" justify="end" class="code-row-bg">
            <Col span="4">
              <FormItem prop="order_no">
                <i-input v-model="form.order_no" clearable placeholder="代付单号"></i-input>
              </FormItem>
            </Col>
            <Col span="4">
              <FormItem prop="out_order_no">
                <i-input v-model="form.out_order_no" clearable placeholder="商户单号"></i-input>
              </FormItem>
            </Col>
            <Col span="4">
              <FormItem prop="acceptor">
                <i-input v-model="form.acceptor" clearable placeholder="受理人"></i-input>
              </FormItem>
            </Col>

            <Col span="4">
              <FormItem prop="channel">
                <i-select v-model="form.channel" clearable style="color: #000;" placeholder="代付渠道">
                <!--  <Option value="0">付款渠道</Option> -->
                  <Option value="pt">商户后台</Option>
                  <Option value="api">API</Option>
                </i-select>
              </FormItem>
            </Col>
            <!-- <Col span="4">
              <FormItem prop="status">
                <i-select v-model="form.status" clearable style="color: #000;" placeholder="状态">
                  <Option value="">全部</Option>
                  <Option value="0">待处理</Option>
                  <Option value="1">处理中</Option>
                  <Option value="2">成功</Option>
                  <Option value="3">失败</Option>
                   <Option value="4">回退</Option>
                </i-select>
              </FormItem>
            </Col> -->
          </Row>
          <FormItem class="btn-search">
            <i-button size="large" class="btn-green" @click="search">搜索</i-button>
          </FormItem>
        </Form>

        <div class="capital-money">
          <div class="capital-money-item">
            订单数：<span class="list1">{{totalData.paidCount}}</span>
            代付金额：<span class="list1">{{totalData.paidSum}}</span>
            代付费用：<span class="list2">{{totalData.poundageSum}}</span>
            扣减金额：<span class="list2">{{totalData.subMomeySum}}</span>
          </div>
        </div>
        <div class="bank-add">
          <RadioGroup size="large" v-model="form.status" type="button" @on-change="getList">
                  <Radio label="">全部</Radio>
                  <Radio label="0">待处理</Radio>
                  <Radio label="1">处理中</Radio>
                  <Radio label="2">成功</Radio>
                  <Radio label="3">失败</Radio>
                  <Radio label="4">回退</Radio>
              </RadioGroup>
           <!-- <i-button @click="batChanges" class="btn-green">批量处理</i-button> -->

         </div>
        <div class="bank-form">
          <div class="form-item">
            <Table
            ref="paid"
            :columns="foodColumns"
            :data="foodData"
            @on-sort-change="filterList"
             @on-cell-click="copyCell"
            >
              <template slot-scope="{ row }" slot="issue_money">
                {{row.issue_money  | submoneyf(row.poundage)}}
              </template>
              <template slot-scope="{ row }" slot="status">
               <Tag :color="row.status | tagColor"> {{row.status  | paidStatus}}</Tag>
              </template>
            </Table> <!-- table组件 -->
          </div>
          <div class="page">
            <Page
            :id="pageId"
             :loading="loading"
             :current="pageCurrent"
             :total="dataCount"
             :page-size="pageSize"
             style="float: left;"
             @on-change="changepage"
             @on-page-size-change="nowPageSize"

             show-total show-sizer show-elevator></Page>
              <!-- page组件 -->
            <!-- <Button style="float: left;margin-left: 10px;" type="primary" @click="goElevatorPage">确认</Button> -->
          </div>
        </div>
      </div>
      <edit-form
        :mData="mData"
        v-model="editFormVisible"
        @submit="getList"
      />
   </Card>

 </template>
<script>
import editForm from '@/components/modal/editForm'
import expandRow from '@/components/table/table-expand'
import { paidlist, changesStatus, batStatus, orderBack } from '@/api/paid'
export default {
  name: 'paid_order',
  props: {
    shadow: {
      type: Boolean,
      default: false
    }
  },
  components: { editForm, expandRow },
  data () {
    return {
      ids: [],
      value: '',
      mData: '',
      loading: false,
      editFormVisible: false,
      pageId: 'targetpage',
      ajaxHistoryData: [],
      exportdata: [],
      // 初始化信息总条数
      dataCount: 0,
      // 每页显示多少条
      pageSize: 10,
      pageCurrent: 1, // 当前页
      form: {
        timeData: '',
        starttime: '',
        endtime: '',
        keyword: '',
        order_no: '',
        acceptor: '',
        out_order_no: '',
        channel: '',
        status: '',
        sortBy: '',
        descending: ''
      },
      foodColumns: [

        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left'
        },

        {
          title: '商户ID/商户名',
          key: 'uid',
          width: 120,
          render: (h, params) => {
            return h('div', [
              h('div', params.row.uid),
              h('Tag', {
                props: {
                  color: 'cyan'
                }
              }, params.row.nickname)
            ])
          }
        },
        {
          title: '代付单号',
          key: 'order_no',
          maxWidth: 120,
          tooltip: true

        },
        {
          title: '账户名',
          key: 'account_name',
          width: 120,
          align: 'center',
          ellipsis: true,
          render: (h, params) => {
            return h(
              'Tooltip',
              {
                props: { placement: 'top' }
              },
              [params.row.account_name, h('span', { slot: 'content', style: { whiteSpace: 'normal', zIndex: '999' } }, '点击拷贝')]
            )
          }
        },
        {
          title: '账户',
          key: 'account',
          width: 120,
          ellipsis: true,

          render: (h, params) => {
            return h(
              'Tooltip',
              {
                props: { placement: 'top' },
                style: { textOverflow: 'ellipsis' }
              },

              [params.row.account, h('span', { slot: 'content', style: { whiteSpace: 'normal', zIndex: '999' } }, '点击拷贝')]
            )
          }
        },

        {
          title: '银行名称',
          key: 'bank_name',
          width: 120,
          ellipsis: true,
          render: (h, params) => {
            return h(
              'Tooltip',
              {
                props: { placement: 'top' }
              },
              [params.row.bank_name, h('span', { slot: 'content', style: { whiteSpace: 'normal', zIndex: '999', wordBreak: 'break-all' } }, '点击拷贝')]
            )
          }
        },
        {
          title: '代付金额(元)',
          key: 'issue_money',
          width: 120,
          sortable: true,
          tooltip: true,
          render: (h, params) => {
            return h(
              'Tooltip',
              {
                props: { placement: 'top' }
              },
              [params.row.issue_money, h('span', { slot: 'content', style: { whiteSpace: 'normal', zIndex: '999', wordBreak: 'break-all' } }, '点击拷贝')]
            )
          }
        },
        {
          title: '手续费(元)',
          key: 'poundage',
          width: 100,
          sortable: true
        },
        {
          title: '扣减金额(元)',
          width: 120,
          slot: 'issue_money'
        },
        {
          title: '状态',
          width: 100,
          slot: 'status'

        },
        {
          title: '受理人',
          key: 'cuid',
          width: 100
        },
        {
          title: '代付渠道',
          key: 'channel',
          width: 100,
          render: (h, params) => {
            const chan = params.row.channel
            if (chan === '商户后台') {
              return h('span', chan)
            } else if (chan === 'API') {
              return h('span', chan)
            }
          }
        },
        {
          title: '创建/处理完成时间',
          key: 'add_time',
          width: 160,
          sortable: true,
          render: (h, params) => {
            return h('div', [
              h('div', params.row.add_time),
              h('div', params.row.dispose_time)
            ])
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          minwidth: 160,
          render: (h, params) => {
            return h('div', [
              h(
                'Button', {
                  props: {

                    size: 'small'
                  },
                  style: {
                    color: 'white',
                    padding: '0 5px',
                    marginRight: '10px',
                    height: '24px',
                    fontSize: '12px',
                    backgroundColor: '#009688'
                  },
                  on: {
                    click: () => {
                      this.$router.push({
                        name: 'paid-order-details',
                        params: { row: params.row }
                      })
                    }
                  }
                },
                '详情'
              ),
              params.row.status === 1 && params.row.dispose_time !== '--' && h(
                'Button', {
                  props: {
                    size: 'small',
                    type: 'info'
                  },
                  style: {
                    color: 'white',
                    padding: '0 5px',
                    marginRight: '10px',
                    height: '24px',
                    fontSize: '12px',
                    backgroundColor: '#009688'
                  },
                  on: {
                    click: () => {
                      this.changAct(params.row.id)
                    }
                  }
                },
                '问题单处理'
              )
              // (params.row.status === 1) && h(
              //   'Button', {
              //     props: {
              //       size: 'small',
              //       type: 'warning'
              //     },
              //     style: {
              //       color: 'white',
              //       padding: '0 5px',
              //       marginRight: '10px',
              //       height: '24px',
              //       fontSize: '12px'

              //     },
              //     on: {
              //       click: () => {
              //         this.openEditForm(params.row.id)
              //       }
              //     }
              //   },
              //   '处理完成'
              // ),
              // (params.row.status === 3) && h(
              //   'Button', {
              //     props: {
              //       size: 'small',
              //       type: 'error'
              //     },
              //     style: {
              //       color: 'white',
              //       padding: '0 5px',
              //       marginRight: '10px',
              //       height: '24px',
              //       fontSize: '12px'

              //     },
              //     on: {
              //       click: () => {
              //         this.backOrder(params.row.id)
              //       }
              //     }
              //   },
              //   '回退'
              // )
            ])
          }
        }
      ],
      foodData: [], // 表格数据（随着分页而变化）

      totalData: {}
    }
  },

  methods: {
    filterList (col) {
      if (col._filterChecked) this.form.status = JSON.stringify(JSON.parse(col._filterChecked))
      if (col.key) {
        this.form.sortBy = col.key
        this.form.descending = col.order
      }
      this.getList()
    },

    getList () {
      this.loading = !this.loading
      this.form.pageCurrent = this.pageCurrent
      this.form.pageSize = this.pageSize
      paidlist(this.form)
        .then(res => {
          this.loading = !this.loading
          this.foodData = res.data.data
          this.totalData = res.data.totalData
          this.dataCount = res.data.count
        })
        .catch(err => {
          this.$Message.error(err.msg)
        })
    },
    changAct (id) {
      changesStatus({ id: id, cmodel: '1', status: '2', cuid: this.$store.state.user.userInfo.id })
        .then(res => {
          this.$message.success(res.msg)
          this.getList()
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },

    batChanges () {
      this.ids = []
      let selectData = []
      selectData = this.$refs.paid.getSelection()
      selectData.map(item => {
        this.ids.push(item.id)
      })
      if (!this.ids.length) {
        this.$Message.error('请选择要处理的订单！')
        return false
      }
      this.$Modal.confirm({
		  title: '确认信息',
		  content: '确认处理选中的' + this.ids.length + '条订单？',
		  okText: '确认',
		  cancelText: '取消',
		  onOk: async () => {
          batStatus({ ids: this.ids, cmodel: '1', status: '1', cuid: this.$store.state.user.userInfo.id })
			  .then(res => {
              this.$Message.success(res.msg)
              this.getList()
			  })
			  .catch(res => {
              this.$Message.error(res.msg)
			  })
		  }
		  })
    },
    backOrder (id) {
      this.$Modal.confirm({
		    title: '确认信息',
		    content: '确认回退订单？回退后不可逆操作！',
		    okText: '确认',
		    cancelText: '取消',
		    onOk: async () => {
          orderBack(id)
				  .then(res => {
              this.$Message.success(res.msg)
              this.getList()
				  })
				  .catch(res => {
              this.$Message.error(res.msg)
				  })
		  }
      })
    },

    search () {
      this.getList()
    },

    // 点击切换页面
    changepage (index) {
      this.pageCurrent = index
      this.getList()
    },
    // 每页显示的数据条数
    nowPageSize (index) {
      this.pageSize = index
      this.getList()
    },
    openEditForm (id) {
      this.mData = id
      console.log(this.mData)
      this.editFormVisible = true
    },
    copyCell (row, col, data) {
      let that = this
      that.$copyText(data).then(function (e) {
        that.$Message.success('复制成功')
      }, function (e) {
        that.$Message.error('复制失败')
      })
    }

  },

  created () {
    this.getList()
  }
}
</script>
 <style lang="less">
  .ivu-tooltip-rel{
    width:120px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
 </style>
